<template>
  <div>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="报名企业" prop="deptName">
        <el-input
          v-model="queryParams.deptName"
          placeholder="请输入报名企业"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格组件 -->
    <el-table :data="trainingList" style="width: 100%"  v-loading="loading">
      <!-- 活动名称列 -->
      <el-table-column label="活动名称" prop="activityName"></el-table-column>

      <!-- 报名企业列 -->
      <el-table-column label="报名企业" prop="deptName">
        <template slot-scope="scope">
          <!-- 点击报名企业数据时，调用 handleEnterpriseClick 方法 -->
          <a @click="handleEnterpriseClick(scope.row.receiverId)" class="hyperlink">
            {{ scope.row.deptName }}
          </a>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 弹出的对话框组件 -->
    <el-dialog :visible.sync="dialogVisible" title="报名企业人员详情" append-to-body="true">
      <el-form :model="queryParamsRegi" ref="queryFormData" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="人员名称" prop="deptName">
          <el-input
            v-model="queryParamsRegi.personnelName"
            placeholder="请输入人员名称"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryRegi">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQueryRegi">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table  :row-style="{ height: '30px' }"  :cell-style="{ padding: '0px' }" border v-loading="loading" :data="registrationList" >
        <el-table-column label="活动名称" align="center" prop="activityName" />
        <el-table-column label="报名企业" align="center" prop="deptName" />
        <el-table-column label="报名人员" align="center" prop="personnelName" />
        <el-table-column label="职务" align="center" prop="personnelDuties" />
        <el-table-column label="联系方式" align="center" prop="personnelContact" />
      </el-table>

      <pagination
        v-show="totalRegi>0"
        :total="totalRegi"
        :page.sync="queryParamsRegi.pageNum"
        :limit.sync="queryParamsRegi.pageSize"
        @pagination="getList"
      />
    </el-dialog>
  </div>
</template>

<script>
import { receptionList,regiList} from "@/api/activity/training";
export default {
  props:{
   activityId:{
     type: String,
     default: null
   }
  },
  created() {
    this.getList();
  },
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 15,
        personnelName: null,
        activityId: null
      },
      //人员查询参数
      queryParamsRegi: {
        pageNum: 1,
        pageSize: 15,
        personnelName: null,
        activityId: null,
        deptId:null
      },
      trainingList:[],
      // 总条数
      total: 0,
      totalRegi:0,
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      tableData: [
        { activityName: '活动1', regiEnterprise: '企业A' },
        { activityName: '活动2', regiEnterprise: '企业B' },
        // 添加更多的数据项
      ],
      dialogVisible: false,
      registrationList: [],
    };
  },
  methods: {
    // 处理点击报名企业数据的方法
    handleEnterpriseClick(receiverId) {
      this.queryParamsRegi.activityId=this.activityId;
      this.queryParamsRegi.deptId=receiverId;
      regiList(this.queryParamsRegi).then(res=>{
        this.registrationList=res.rows;
        this.totalRegi=res.total;
        this.loading=false;
      })
      this.dialogVisible = true;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    handleQueryRegi(){
      this.queryParamsRegi.pageNum=1;
      this.handleEnterpriseClick(this.queryParamsRegi.deptId);
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 人员重置按钮操作 */
    resetQueryRegi() {
     this.queryParamsRegi.personnelName=null;
      this.handleEnterpriseClick(this.queryParamsRegi.deptId);
    },
    /** 查询活动信息培训列表 */
    getList() {
      this.loading = true;
      this.queryParams.activityId=this.activityId;
      receptionList(this.queryParams).then(response => {
        this.trainingList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
  },
};
</script>

<style scoped>
.hyperlink {
  color: #007BFF; /* 蓝色 */
  text-decoration: underline;
  cursor: pointer;
}
</style>
